<template>
  <div class="order">
    <!-- 头部导航栏 -->
    <div class="header" ref="container">
      <van-sticky :container="container">
        <van-nav-bar type="warning" title="订单" />
      </van-sticky>
    </div>
    <!-- 顶部菜单栏 -->
    <div class="menu" ref="contain">
      <van-sticky :container="contain">
        <van-tabs v-model="activeName" @click="onClick">
          <van-tab title="全部订单"> </van-tab>
          <van-tab title="待派单"> </van-tab>
          <van-tab title="待接单"> </van-tab>
          <van-tab title="待确认"> </van-tab>
          <van-tab title="已完成"> </van-tab>
        </van-tabs>
      </van-sticky>
    </div>
    <!-- 底部订单详情 -->
    <div class="orderDetail">
      <van-card
        :num="dindan.orderLines.length"
        :price="dindan.total + '.00'"
        :desc="
          dindan.address.province +
          dindan.address.city +
          dindan.address.area +
          dindan.address.address
        "
        :title="dindan.customer.username"
        :thumb="dindan.customer.userFace"
        v-for="(dindan, index) in orderData"
        :key="index"
        @click="detail(dindan, index)"
      >
        <template #tags>
          <van-tag :type="statusType(dindan.status)">
            {{ dindan.status }}
          </van-tag>
          <br />
          <span>{{
            moment(dindan.orderTime).format("YYYY-MM-DD HH:mm:ss")
          }}</span>
        </template>
      </van-card>
    </div>
    <div style="height: 60px"></div>
  </div>
</template>

<script>
import { Toast } from "vant";
const moment = require("moment");
// 引入axios
import { get } from "@/http/axios";
// 引入vuex的辅助函数
import { mapActions, mapState } from "vuex";
export default {
  data() {
    return {
      activeName: 0,
      moment,
      type: ["primary", "success", "danger", "warning"],
      status: "",
      customData: [],
      userId: "",
      container: null,
      contain: null,
    };
  },
  mounted() {
    this.container = this.$refs.container;
    this.contain = this.$refs.contain;
  },
  methods: {
    statusType(status) {
      if (status == "待接单") {
        return this.type[0];
      }
      if (status == "待派单") {
        return this.type[3];
      }
      if (status == "待确认") {
        return this.type[2];
      }
      if (status == "已完成") {
        return this.type[1];
      }
    },
    onClick(name, title) {
      if (title == "全部订单") {
        this.queryOrder();
      } else {
        this.queryOrder(title);
      }
      Toast(title);
    },
    // 获取所以订单数据
    ...mapActions("order", ["getAllOrderData"]),
    async queryOrder(title) {
      let res = await get("/user/info?token=" + localStorage.getItem("token"));
      this.userId = res.data.data.id;
      let data = {
        page: 1,
        pageSize: 10,
        status: title,
        customerId: this.userId,
      };
      // 调用vuex中的方法
      this.getAllOrderData(data);
    },
    // 跳转到订单详情界面
    detail(dindanId, activeKey) {
      // 使用编程式导航进行路由跳转
      this.$router.push({
        // 路径
        path: "/manager/details",
        query: {
          dindanId,
          activeKey,
        },
      });
    },
  },
  created() {
    // 自动获取订单数据
    this.queryOrder();
  },
  computed: {
    // 引入订单状态相关的数据
    ...mapState("order", ["orderData"]),
  },
};
</script>

<style scoped>
.order {
  width: 100%;
  height: 1200px;
  background-repeat: repeat;
  background-size: cover;
  background-image: url("../Home/y0.jpg");
}
.van-nav-bar {
  height: 60px;
  /* line-height: 30px; */
  background: linear-gradient(to right, #acb6e5, #86fde8);
}
.van-card {
  margin-top: 20px;
  border-radius: 8px;
  width: 94%;
  margin-left: 3%;
  box-shadow: 2px 2px 2px #acb6e5;
}
::v-deep .van-nav-bar__title {
  margin-top: 40px;
  font-size: 25px;
  font-weight: bolder;
  font-family: "华文行楷";
  color: white;
}
.van-card:hover {
  margin-top: 20px;
  border-radius: 8px;
  width: 96%;
  margin-left: 2%;
  /* box-shadow: 2px 2px 2px 2px rgba(132, 22, 235, 0.5); */
  box-shadow: 2px 2px 2px #86fde8;
}
::v-deep .van-tag--danger.van-tag--plain {
  color: rgb(165, 63, 151);
}
</style>